import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import {
  Table,
  Icon,
  Divider,
  Form,
  Select,
  DatePicker,
  Input,
  Card,
  Tag,
  Avatar,
  Checkbox,
  Rate,
  Progress,
  Button,
  Dropdown,
  Row,
  Col,
  Modal,
  Collapse,
  List,
  Radio,
  InputNumber,
  Switch,
  Tooltip,
} from 'antd';

import ThirdVerify from './ThirdVerify/ThirdVerify';
import styles from './CustomerList.less';
import ImageUploader from './Attachment/ImageUploader';
import AttachmenTable from './Attachment/AttachmentTable';
import ImageDisplayer from './Attachment/ImageDisplayer';
import DescriptionList from 'components/DescriptionList';
import Description from '../../components/Falcon/Description';
import nopictures from '../../assets/nopictures3.svg';
import querystring from 'querystring';
import { solo } from '../../common/solo';

const Panel = Collapse.Panel;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { TextArea } = Input;
// const { Description } = DescriptionList;

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 18,
  },
};
const formItemLayout2 = {
  labelCol: {
    span: 3,
  },
  wrapperCol: {
    span: 21,
  },
};

@connect(({ channel }) => ({
  channel,
}))
@Form.create()
export default class DealerProductDetails extends PureComponent {
  // constructor(props) {
  //   super(props);
  // }

  constructor(props) {
    super(props);
    this.state = {
      dealerLevel: false,
    };
  }
  // state = {
  //   dealerLevel: false,
  // };

  handleChannelRank = rank => {
    switch (rank) {
      case '1':
        return 'A';
        break;
      case '2':
        return 'B';
        break;
      case '3':
        return 'C';
        break;
    }
  };

  renderPanelContent = channelDetails => {
    return (
      channelDetails.channel && (
        <div>
          <Form>
            <Row>
              <Col span={12}>
                <FormItem label="经销商名称" {...formItemLayout}>
                  {channelDetails.channel.dealerName}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem label="经销商等级" {...formItemLayout}>
                  {/* {channelDetails.channel.rank} */}
                  {this.handleChannelRank(channelDetails.channel.rank)}
                  <Tooltip title="查看经销商等级">
                    <Button
                      style={{ marginLeft: '20px' }}
                      onClick={this.handleShowDealerIntroductions}
                      type="dashed"
                      size="small"
                      shape="circle"
                      icon="info-circle"
                    />
                  </Tooltip>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <FormItem label="经销商简称" {...formItemLayout}>
                  {channelDetails.channel.simpleName}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem label="所属组织" {...formItemLayout}>
                  {channelDetails.channel.branchName}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <FormItem label="负责人" {...formItemLayout}>
                  {channelDetails.channel.leader}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem label="联系电话" {...formItemLayout}>
                  {channelDetails.channel.phone}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <FormItem label="垫资账户" {...formItemLayout}>
                  {channelDetails.channel.fundAccount}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem label="开户银行" {...formItemLayout}>
                  {channelDetails.channel.depositBank}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <FormItem label="银行账号" {...formItemLayout}>
                  {channelDetails.channel.bankAccount}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem label="营业执照号" {...formItemLayout}>
                  {channelDetails.channel.licenseNo}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={24}>
                <FormItem label="照片展示" {...formItemLayout2}>
                  <Col span={3}>
                    <div style={{ textAlign: 'center' }}>
                      {channelDetails.channel.licenseImg == '' ? (
                        <img src={nopictures} style={{ width: '50%', height: '50%' }} />
                      ) : (
                        <ImageDisplayer src={solo.imgShow + channelDetails.channel.licenseImg} />
                      )}
                    </div>
                  </Col>
                  <Col span={3}>
                    <div style={{ textAlign: 'center' }}>
                      {channelDetails.channel.idImg == '' ? (
                        <img src={nopictures} style={{ width: '50%', height: '50%' }} />
                      ) : (
                        <ImageDisplayer src={solo.imgShow + channelDetails.channel.idImg} />
                      )}
                    </div>
                  </Col>
                  <Col span={3}>
                    <div style={{ textAlign: 'center' }}>
                      {channelDetails.channel.doorImg == '' ? (
                        <img src={nopictures} style={{ width: '50%', height: '50%' }} />
                      ) : (
                        <ImageDisplayer src={solo.imgShow + channelDetails.channel.doorImg} />
                      )}
                    </div>
                  </Col>
                  <Col span={3}>
                    <div style={{ textAlign: 'center' }}>
                      {channelDetails.channel.hallImg == '' ? (
                        <img src={nopictures} style={{ width: '50%', height: '50%' }} />
                      ) : (
                        <ImageDisplayer src={solo.imgShow + channelDetails.channel.hallImg} />
                      )}
                    </div>
                  </Col>
                  <Col span={3}>
                    <div style={{ textAlign: 'center' }}>
                      {channelDetails.channel.cardImg == '' ? (
                        <img src={nopictures} style={{ width: '50%', height: '50%' }} />
                      ) : (
                        <ImageDisplayer src={solo.imgShow + channelDetails.channel.cardImg} />
                      )}
                    </div>
                  </Col>
                  <Col span={3}>
                    <div style={{ textAlign: 'center' }}>
                      {channelDetails.channel.bankCardImg == '' ? (
                        <img src={nopictures} style={{ width: '50%', height: '50%' }} />
                      ) : (
                        <ImageDisplayer src={solo.imgShow + channelDetails.channel.bankCardImg} />
                      )}
                    </div>
                  </Col>
                </FormItem>
              </Col>
            </Row>

            <Row>
              <Col span={12}>
                {channelDetails.channel &&
                  channelDetails.channel.cooperateProtocol.map(item => {
                    return (
                      <FormItem label="合作协议" {...formItemLayout}>
                        <a href={`${solo.fileDownload + item}`}>下载</a>
                      </FormItem>
                    );
                  })}
              </Col>
              <Col span={12}>
                {channelDetails.channel &&
                  channelDetails.channel.otherProtocol.map(item => {
                    return (
                      <FormItem label="其他协议" {...formItemLayout}>
                        <a href={`${solo.fileDownload + item}`}>下载</a>
                      </FormItem>
                    );
                  })}
              </Col>
            </Row>
          </Form>
        </div>
      )
    );
  };

  handleShowDealerIntroductions = () => {
    this.setState({
      dealerLevel: true,
    });
  };

  handleCancelDealerLevel = () => {
    this.setState({
      dealerLevel: false,
    });
  };

  render() {
    const { channel } = this.props;
    const { detailsChannel } = channel;
    // const activeKey = productList.length > 0 ? productList[0].key : null;

    return (
      <div>
        {/* { console.log("channelProductDiviList 详情", this.props.channelDetails)} */}
        {this.props.channelDetails && this.renderPanelContent(this.props.channelDetails)}
        <Modal
          title="等级说明"
          visible={this.state.dealerLevel}
          footer={null}
          keyboard={true}
          onCancel={this.handleCancelDealerLevel}
        >
          <Description />
        </Modal>
      </div>
    );
  }
}
